<template>
  <div>
    <a-modal title="SKU详情" :visible="visible" @before-open="open" @cancel="visible = false" :footer="false" :align-center="false" title-align="start" width="1000px" :mask-closable="false">
      <div class="clearfix">
        <div class="fl" style="width: 200px; height: 200px">
          <a-image :src="getSrc()" :width="200" :height="200" />
        </div>
        <div class="fl" style="width: calc(100% - 200px)">
          <a-row>
            <a-col :span="3" style="color: #a2a2a2; text-align: right; width: 120px">SKU名称：</a-col>
            <a-col :span="19" :offset="1">{{ skuInfo.skuName ? skuInfo.skuName : '--' }}</a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">SKU：</a-col>
                <a-col :span="15" :offset="2">{{ skuInfo.sku ? skuInfo.sku : '' }}</a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">产品状态：</a-col>
                <a-col :span="15" :offset="2">{{ filterSkuStatus() }}</a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">SPU：</a-col>
                <a-col :span="15" :offset="2" class="highlight cursor" @click="showSpuDetail">{{ skuInfo.spu ? skuInfo.spu : '' }}</a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <!-- <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">产品类目：</a-col>
                <a-col :span="15" :offset="2">{{ $extract(skuInfo, 'category.name') }}</a-col>
              </a-row> -->
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">重量：</a-col>
                <a-col :span="15" :offset="2">
                  <div v-if="skuInfo.weight && skuInfo.weight.weight">{{ $extract(skuInfo, 'weight.weight') }}({{ $extract(skuInfo, 'weight.unit') }})</div>
                  <div v-else>--</div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">体积：</a-col>
                <a-col :span="15" :offset="2">
                  <a-space v-if="skuInfo.volume">
                    <div>{{ $extract(skuInfo, 'volume.length') ? $extract(skuInfo, 'volume.length') : '-' }}×</div>
                    <div>{{ $extract(skuInfo, 'volume.width') ? $extract(skuInfo, 'volume.width') : '-' }}×</div>
                    <div>{{ $extract(skuInfo, 'volume.height') ? $extract(skuInfo, 'volume.height') : '-' }}</div>
                    <div>{{ $extract(skuInfo, 'volume.unit') }}</div>
                  </a-space>
                  <div v-else>--</div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">销售员：</a-col>
                <a-col :span="15" :offset="2" v-if="detail.data.salerList">
                  <span class="name color" v-for="(item, index) of detail.data.salerList">{{ item.name }}{{ index != detail.data.salerList.length - 1 ? ',' : '' }}</span>
                </a-col>
                <a-col :span="15" :offset="2" v-else>
                  <span>--</span>
                </a-col>
              </a-row>
            </a-col>
          </a-row>

          <!-- <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">重量：</a-col>
                <a-col :span="15" :offset="2">
                  <div v-if="skuInfo.weight && skuInfo.weight.weight">{{ $extract(skuInfo, 'weight.weight') }}({{ $extract(skuInfo, 'weight.unit') }})</div>
                  <div v-else>--</div>
                </a-col>
              </a-row>
            </a-col>
          </a-row> -->

          <a-row class="mt10">
            <a-col :span="3" style="color: #a2a2a2; text-align: right">标签：</a-col>
            <a-col :span="20" :offset="1">
              <span v-if="skuInfo.tagList" v-for="tag of skuInfo.tagList" class="tag-btn" :style="{ backgroundColor: tag.color }">{{ tag.name }}</span>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="3" style="color: #a2a2a2; text-align: right">备注：</a-col>
            <a-col :span="20" :offset="1">
              {{ skuInfo.remark }}
            </a-col>
          </a-row>
        </div>
      </div>

      <div v-if="specList[0]">
        <div class="title-bar">规格</div>
        <a-descriptions class="mt10 mb10" :data="specList" bordered />
      </div>

      <a-tabs v-model:active-key="currentTab">
        <a-tab-pane title="产品图" :key="1">
          <downloadPic ref="downloadPic" />
        </a-tab-pane>
        <a-tab-pane title="产品属性" :key="2">
          <div v-if="skuInfo.propList && skuInfo.propList[0]" class="mt10">
            <a-descriptions :data="propertyListData" bordered />
          </div>
          <a-empty v-else />
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <!-- <ShowSpuDetail ref="showDetial" :detail="spuDetail" /> -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive } from 'vue'
  import { searchSpuDetail, productSKUDetail } from '@/api/product'
  import _ from 'lodash-es'
  // import ShowSpuDetail from './showSpuDetail.vue'
  import DownloadPic from './downloadPic.vue'

  export default defineComponent({
    emits: ['save'],
    props: ['detail'],
    components: { DownloadPic },
    setup(props, { emit }) {
      let visible = ref(false)
      const showDetial = ref()
      const downloadPic = ref()
      const spuDetail = ref({ type: '', data: {} })
      let skuInfo: any = ref({})
      let specList: any = ref([])
      let propertyListData: any = ref([])
      let currentTab = ref(1)
      const open = () => {
        specList.value = []
        getSkuDetail()
      }

      const getSkuDetail = async () => {
        const res = await productSKUDetail(props.detail.data.id)
        skuInfo.value = res?.data || {}
        if (skuInfo.value.specValueList) {
          skuInfo.value.specValueList.forEach((e: any) => {
            let obj = { label: e.nameCn, value: e.valueCn }
            specList.value.push(obj)
          })
        }
        downloadPic.value.init(skuInfo.value)

        if (skuInfo.value.propList) delPropertyListData(skuInfo.value.propList)
      }

      const delPropertyListData = (list: any) => {
        propertyListData.value = []
        list.forEach((e: any) => {
          let obj = {
            label: e.name,
            value: '',
          }
          let text = ''
          switch (e.type) {
            case 1:
            case 4:
              text = e.valueStr
              break
            case 2:
            case 7:
            case 8:
              text = e.valueStrList.join(',')
              break
            case 3:
              text = e.valueBoolean ? '是' : '否'
              break
            case 5:
              text = e.valueNumber
              break
            case 6:
              text = e.valueBigDecimal
              break
            default:
              text = '类型未定义'
              break
          }
          obj.value = text
          propertyListData.value.push(obj)
        })
      }

      const getSrc = () => {
        let str = skuInfo.value?.productPicList && skuInfo.value?.productPicList[0] ? skuInfo.value?.productPicList[0].url : ''
        return str
      }

      const showSpuDetail = async () => {
        const res = await searchSpuDetail(props.detail.data.id)
        spuDetail.value.data = res?.data
        showDetial.value.visible = true
      }

      const filterSkuStatus = () => {
        let text = ''
        switch (skuInfo.value.status) {
          case 'ACTIVE':
            text = '可售'
            break
          case 'NOT_ACTIVE':
            text = '停售'
            break
          case 'DISCONTINUED':
            text = '停产'
            break
          case 'OUTSOURCED':
            text = '委托加工'
            break
        }
        return text
      }

      return {
        visible,
        open,
        getSrc,
        showDetial,
        showSpuDetail,
        spuDetail,
        skuInfo,
        filterSkuStatus,
        specList,
        downloadPic,
        currentTab,
        propertyListData,
      }
    },
  })
</script>

<style lang="less" scoped>
  .tag-btn {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    margin-right: 5px;
  }
</style>
